<template>
  <div class="block-item">
    <div class="block-item-content">
      <div class="item-title">{{ data.title }}</div>
      <div class="item-box">
        <!-- TODO 点击链接时 延时效果 -->
        <a :href="obj.href" class="app-item" v-for="(obj, index) in data.list" :key="index">
          <div class="bg-box">
            <Icon slot="icon" :classAttr="obj.iconClass" :style="'color:'+obj.color+';'"></Icon>
            <sup v-if="obj.tag">
              <badge :text="obj.tagValue" :style="'background:'+obj.tagBg+';'"></badge>
            </sup>
          </div>
          <h3>{{ obj.name }}</h3>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import Icon from '@/components/common/icon/icon'
import { Badge } from 'vux'
export default {
  name: 'block-item',
  props: {
    data: Object
  },
  components: {
    Icon, Badge
  },
  methods: {
  }
}
</script>

<style lang="less" scoped>

  @import "../../../assets/less/variables.less";

  .block-item {
    padding: 15px 0 0;
    background: #f5f5f5;
  }
  .block-item-content {
    background: #fff;
    display: grid;
  }
  .item-title {
    font-size: 0.8rem;
    margin-top: 12px;
    padding-left: 15px;
    color: #5b5b5b;
  }
  .item-box a {
    text-decoration: none;
    color: #333;
    cursor: pointer;
  }
  .item-box a:hover {
    animation: appItemHover 100ms;
  }
  @keyframes appItemHover
  {
    from {transform: scale(1.0);}
    to {transform: scale(1.1);}
  }
  .app-item {
    box-sizing: border-box;
    display: block;
    width: 25%;
    float: left;
    padding: 10px 10px;
    text-align: center;
  }
  .bg-box {
    width: 45px;
    height: 45px;
    margin: 0 auto;
    font-size: 1.5rem;
    border-radius: 25px;
    background: rgba(100, 186, 234, 0.1);
    position: relative;
  }
  .bg-box i {
    line-height: 45px;
  }
  .bg-box sup {
    position: absolute;
    font-size: 0.625rem;
  }
  .app-item h3 {
    font-size: 0.675rem;
    font-weight: normal;
  }


</style>

